<template>
  <div class="container">
    <!-- 弹出框区域 -->
    <el-form ref="addEmpRef" :model="form" label-width="80px" :rules="rules">
      <el-form-item
        label="所属学科"
        label-width="80px"
        prop="subjectID"
        v-show="!this.$route.query.id && !this.$route.query.name"
      >
        <el-select

          v-model="form.subjectID"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in dictysID"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
          <!-- <el-option label="区域二" value="beijing"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称" style="width: 100%"  prop="directoryName">
        <el-input v-model="form.directoryName" placeholder="请输入目录名称" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="quxiao">取 消</el-button>
      <el-button type="primary" @click="utilent">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'directorys-add',
  // 父传子
  props: {
    iEidint: {
      type: Boolean,
      required: true
    },
    listId: {
      type: [Number, String],
      required: true
    },
    subjectName: {
      type: [Number, String, Boolean],
      default: ''
    }
  },
  data () {
    return {
      form: {
        directoryName: '',
        subjectID: this.$route.query.id
      },
      dictysID: [], // 循环学科数据
      // 表单校验
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    }
  },
  //   钩子函数
  created () {
    // 学科数据
    this.gitsimple()
    // this.add()
    this.getdatar()
  },
  methods: {
    //  回填数据 修改
    async getdatar () {
      if (this.iEidint) {
        const res = await detail({ id: this.listId })
        this.form = res.data
        // 判断有id回填，没id不回填
        if (this.subjectName) {
          this.gitsimple()
        } else {
          this.form.subjectID = ''
          this.gitsimple()
        }
      }
    },
    // 点击修改弹框数据
    async getupdate () {
    //   await update(this.form, this.listId)

      await update({ ...this.form, id: this.listId })
      //   console.log(res)
      this.$message.success('修改成功')
    },
    //   取消按钮
    quxiao () {
      this.$emit('clone')
    },
    // 获取学科数据
    async gitsimple () {
      const res = await simple()
      //   console.log(res)
      this.dictysID = res.data// 重现渲染数据
    },
    // 添加的时候提示
    async hiluefhwjkn () {
    //   await add(this.form)
      await add({ directoryName: this.form.directoryName, subjectID: +this.form.subjectID })

      // // 添加成功以后的提示
      this.$message.success('添加成功')
    },
    // 确定按钮
    async utilent () {
    //   await add({ directoryName: this.form.directoryName, subjectID: +this.form.subjectID })
      // 兜底验证
      this.$refs.addEmpRef.validate(async (valid) => {
        if (!valid) return
        this.iEidint ? this.getupdate() : this.hiluefhwjkn()
        // this.form = {}
        // const res = await add(this.form)
        // console.log(res)
        // // // 添加成功以后的提示
        // this.$message.success('添加成功')
        // this.form = {
        //   directoryName: '',
        //   subjectID: ''
        // this.$refs.addEmpRef.resetFields()
        // // 子穿给父组件

        this.$emit('utile')
      })
    }

  }
}
</script>

<style scoped >
.dialog-footer {
  margin-left: 230px;
}
</style>
